<template>
  <div class="container">
    <!--  -->
    <!-- 左侧主要内容展示区 -->
    <div class="left">
      <div class="label">JsShower 组件</div>
      <div class="text">展示js代码的组件</div>

      <div class="label">组件效果</div>

      <FoldPanel>
        <template #top>
          <JsShower :jsStr="str"></JsShower>
        </template>
        <template #bottom>
          <HtmlShower :htmlStr="htmlStr1" :border="false"></HtmlShower>
          <JsShower :jsStr="jsStr1" :border="false"></JsShower>
        </template>
      </FoldPanel>
    </div>

    <!--  -->
    <!-- 右侧辅助功能栏 -->
    <div class="right">相关组件</div>
  </div>
</template>

<script lang="tsx" setup>
import { JsShower, FoldPanel, HtmlShower } from '@/customComponents/components'

const str = `
import { computed } from 'vue'

const props = defineProps({
userRight: { 
type: [String, Array], default: () => [] ,
},
})
 
const options = [
  {value: 'Option2',label: 'Option2',},
]

const showSlot = computed(() => {
if (props.userRight.length === 0) return false

return true
})
`

const htmlStr1 = `
<template>
  <JsShower :jsStr="str"></JsShower>
</template>
`
const jsStr1 = `
import { JsShower, FoldPanel, HtmlShower } from '@/customComponents/components'

const str = 'js代码字符串'
`
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  display: flex;
  justify-content: space-between;

  > .left {
    width: 76%;
  }
  > .right {
    width: 24%;
  }
}

.label {
  font-size: 17px;
  color: #606266;
  letter-spacing: 1px;
  font-weight: bold;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
    Microsoft YaHei, SimSun, sans-serif;
  padding-top: 30px;
  padding-bottom: 10px;
}

.text {
  line-height: 28px;
  letter-spacing: 1px;
  color: #444444;
  font-weight: b;
}
</style>
